<template>
    <transition name="loadmask">
        <div id="downloadmask" class="align-center" :style="`background:${options.background}`">
            <el-progress v-if="options.progress" type="circle" :percentage="progress" :class="{'anti-clockwise':options.antiClockwise}"></el-progress>
            <div :style="`color:${options.color}`" class="tip-container">
                <span v-for="(v,i) in tipsArry" :key="i" class="loading-text-animation" :style="`animation-delay:${i*0.1}s`">{{v}}</span>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            options: {},
            tipsArry: [],
            dom: '',
            isclose: false,
            progress: 0
        }
    },
    mounted() {
        this.$nextTick(() => {
            window.addEventListener('maskProgress', (e) => {
                // console.log(e.detail.progress)
                // let newProgress = parseInt(e.detail.progress === 100 ? e.detail.progress : e.detail.progress / (e.detail.totalBytes * 1024 * 1024) * 100)
                // console.log(this.progress)
                this.progress = e.detail.progress
            })
        })
    },
    watch: {
        progress(val) {
            // console.log(val)
        }
    }
}
</script>

<style lang="scss">
.loadmask-enter-active,
.loadmask-leave-active {
    transition: all 0.5s;
}
.loadmask-enter,
.loadmask-leave-to {
    display: none;
}
#downloadmask {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 7777;
    height: calc(100vh - 64px);
    width: 100vw;
    &::after {
        content: "";
        position: fixed;
        top: 40px;
        left: 0;
    }
    .tip-container {
        margin-top: 10px;
    }
    .el-progress__text {
        color: #fff;
    }
    .anti-clockwise {
        .el-progress-circle {
            transform: rotate(180deg);
        }
    }
    .loading-text-animation {
        display: inline-block;
        animation: loadiTips 1s ease infinite;
    }
    @keyframes loadiTips {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3px);
        }
        100% {
            transform: translateY(3px);
        }
    }
}
@media screen and(max-width: 1439px) {
    #downloadmask {
        height: calc(100vh - 50px);
    }
}
</style>
